<template>
  <div id="home">
    <!-- 导航 -->
    <nav-bar class="home-nav"> <div slot="center">购物街</div> </nav-bar>
    <scroll 
    class="wrapper" 
    ref="scroll" 
    @scroll="scroll" 
    @scrollToEnd="scrollToEnd"
    @backtopClick="backtopClick">
      <!-- 轮播图 -->
      <home-swipe :banner="banner"></home-swipe>
      <recom-mend :recommend="recommend"></recom-mend>
      <feature-view></feature-view>
      <tab-control
        :title="['流行', '新款', '精选']"
        class="tab-control"
        @tabClick="tabClick"
      ></tab-control>
      <goods-list :goods="goods[currentType].list"></goods-list>
    </scroll>
    <!-- .native可以监听原生组件的事件 -->
    <back-top @click.native="backtopClick"></back-top>
  </div>
</template>

<script>
import HomeSwipe from "./childComps/homeSwipe";
import recomMend from "./childComps/recomMend";
import FeatureView from "./childComps/FeatureView";

import NavBar from "components/navbar/navbar";
import TabControl from "components/tabcontrol/TabControl";
import GoodsList from "components/goods/GoodsList";
import BackTop from "components/backTop/BackTop"

import { getHomedata, getHomeGoods } from "network/home";

import scroll from "@/common/scroll/scroll";


export default {
  name: "home",
  components: {
    NavBar,
    HomeSwipe,
    recomMend,
    FeatureView,
    TabControl,
    GoodsList,
    scroll,
    BackTop
  },
  data() {
    return {
      banner: [],
      recommend: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      isShowBackTop: false,
    };
  },
  created() {
    this.getHomedata();

    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted() {
    
  },
  updated() {
    this.$refs.scroll.refresh();
  },
  methods: {
    // 事件监听相关的方法
    tabClick(index) {
      console.log(index);
      let currentType = ["pop", "new", "sell"];
      this.currentType = currentType[index];
      console.log(this.currentType);
    },

    // 网络请求相关的方法
    getHomedata() {
      // 请求数据
      getHomedata().then((res) => {
        // console.log(res)
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      //请求商品数据
      //设置页码 page
      let page = this.goods[type].page + 1;

      //这个才是请求
      getHomeGoods(type, page).then((res) => {
       
        //数组解构赋值
        // this.goods[type].list.push.apply(this.goods[type].list,res.data.list) apply用法
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;

        // 完成上拉加载更多
        this.$refs.scroll.refresh();
      });
    },
    scroll(position) {
      //判断backTop是否显示
      this.isShowBackTop = -position.y > 1000;
      // console.log(position);
      //判断tabControl是否吸顶
      this.isShowTabControl = -position.y > this.tabOffsetTop;
      
    },
    scrollToEnd() {
      //让better-scroll插件重新计算content的高度
      this.getHomeGoods(this.currentType);
    },
    backtopClick() {
      //返回顶部/
      this.$refs.scroll.scrollTo(0,0,500);
    }
  },
};
</script>

<style scoped>
#home {
  position: relative;
  padding: 44px 0;
  height: 100vh;
}
.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-tint);
  color: #fff;
  z-index: 99;
}
.tab-control {
  position: sticky;
  top: 44px;
  z-index: 99;
}
.wrapper {
  position: absolute;
  top: 44px;
  bottom: 49px;
  overflow-y: hidden;
  left: 0;
  right: 0;
}
</style>